<template>
    <div>
        <h1 style="text-align: center;">商品列表</h1>
        <el-button type="primary" 
        v-permission="{path: '/dish/add', name: '商品添加'}"
        @click="$router.push('/dish/add')">新增商品</el-button>
        <el-table
        :data="dislist"
        style="width: 100%">
            <el-table-column
                prop="name"
                label="商品名称"
                width="150">
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格"
                width="150">
            </el-table-column>
            <el-table-column
                prop="imgpath"
                label="商品图片"
                width="150">
                <template slot-scope="scope">
                    <img width="100px" height="100px" :src="'/admin/' + scope.row.imgpath" alt="">                        
                </template>
            </el-table-column>
            <el-table-column
                label="规格"
                width="150">
                <template slot-scope="scope">
                    <span>{{ scope.row.specifications | spedAndKind }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="类别"
                width="150">
                <template slot-scope="scope">
                    <span>{{ scope.row.kind | spedAndKind }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="是否上架"
                width="150">
                <template slot-scope="scope">
                    <el-switch
                        v-model="scope.row.enable"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                prop="catname"
                label="类别"
                width="150">
            </el-table-column>
            <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                size="mini"
                v-permission="{path: '/dish/edit', name: '商品修改'}"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                size="mini"
                type="danger"
                v-permission="{path:'/dish/del', name:'商品删除'}"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>

        <!-- 商品编辑 -->

        <el-dialog
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
        <h1 style="text-align: center;">商品修改</h1>
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="商品名称">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="商品价格">
                <el-input v-model="form.price"></el-input>
            </el-form-item>
            <el-form-item label="商品分类">
                <template slot-scope="scope">
                    <el-select v-model="form.catname" placeholder="请选择商品分类">
                        <el-option v-for="item in catlist" :label="item.catname" :value="item.catname" :key="item._id"></el-option>
                    </el-select>
                </template>
            </el-form-item>
            <el-form-item label="是否上架">
                <template>
                    <el-switch
                        v-model="form.enable"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </template>
            </el-form-item>
            <el-form-item label="商品规格">
                <div class="specs" v-for="(item, index) in form.spec" :key="item.id">
                    <el-input v-model="item.value"></el-input>
                    <el-button @click="addspec" v-if="index === form.spec.length - 1" type="primary" icon="el-icon-circle-plus-outline" circle></el-button>
                    <el-button @click="remspec" v-if="index === form.spec.length - 1 && form.spec.length > 2" type="primary" icon="el-icon-remove-outline" circle></el-button>
                </div>
            </el-form-item>
            <el-form-item label="商品种类">
                <div class="specs" v-for="(item, index) in form.kinds" :key="item.id">
                    <el-input v-model="item.value"></el-input>
                    <el-button @click="addkind" v-if="index === form.kinds.length - 1" type="primary" icon="el-icon-circle-plus-outline" circle></el-button>
                    <el-button @click="remkind" v-if="index === form.kinds.length - 1 && form.kinds.length > 2 " type="primary" icon="el-icon-remove-outline" circle></el-button>
                </div>
            </el-form-item>
            <el-form-item label="商品图片">
                <el-upload
                    class="upload-demo"
                    action="/admin/api/uploads"
                    accept=".jpg,.png,.jpeg,.webp,.gif"
                    :show-file-list="false"
                    name="dishimg"
                    :on-success="successUpload"
                    >
                    <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <img v-show="form.imgpath === '' " width="200px" height="200px" src="../../assets/noimg.gif" alt="">
                <img v-show="form.imgpath != '' " width="200px" height="200px" :src="'/admin/' + form.imgpath"   alt="">
            </el-form-item>
            <el-form-item label="商品详情">
                <quill-editor v-model="form.detail"
                    :options="editorOption">
                </quill-editor>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="dishedit">立即修改</el-button>
                <el-button @click="quxiao">取消</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>
    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { dishList, dishDel, dishEdit, catList } from '@/request'
import permission from '@/utils/permission'
export default {
    components: {
        quillEditor
    },
    directives:{
        permission
    },
    filters:{
        spedAndKind(value){
            // console.log(value);
            return value.split('=====').join('/')
        }
    },
    data () {
        return {
            dislist:[],
            editorOption: {
                // some quill options
            },
            dialogVisible:false,
            catlist:[],
            form:{
                name:'',
                price:'',
                catname:'',
                enable:'false',
                imgpath:'',
                detail:'',
                spec: [],
                kinds: [],
            },
        }
    },
    methods: {
        quxiao() {
            this.dialogVisible=false
            this.$router.push('/dish/list')
            this.form.spec=[]
            this.form.kinds=[]
        },
        // 去修改
        handleEdit(index,row) {
            // console.log(111,this.form);
            // console.log(222,row);
            // return
            this.dialogVisible=true
            this.form=Object.assign(this.form,row)
            // console.log(333,this.form);
            let specs = row.specifications.split('=====')
            let kind = row.kind.split('=====')
            // console.log(specs,kind);
            specs.forEach(item => {
                this.form.spec.push({
                    'value':item
                })
            })
            kind.forEach(item => {
                this.form.kinds.push({
                    'value':item
                })
            })
            // console.log(this.form);
            // return
        },
        // 商品列表
        async GetDishList() {
            let data = await dishList()
            this.dislist = data.data.dishlist
            // console.log(this.dislist);
        },
        // 分类列表
        async GetCatList() {
            let data = await catList()
            this.catlist = data.data.catlist
            // console.log(this.catlist);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        // 删除
        async handleDelete(index, row) {
            this.$confirm('你真的要删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    dishDel(row).then(data =>{
                        let { error_code,msg } = data
                            if(error_code === 200 ){
                                this.$message({
                                    type: 'success',
                                    duration: 1500,
                                    message: msg,    
                                })
                            } else {
                                this.$message({
                                    type: 'error',
                                    duration: 1500,
                                    message: msg,
                                })
                            }
                            this.GetDishList()
                    }) 
                }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '停止删除'
                });          
            });
        },

        // 按钮 +-
        addspec() {
            this.form.spec.push({
                id: this.form.spec.length + 1,
                value: ''
            })
        },
        remspec() {
            this.form.spec.pop()
        },
        addkind() {
            this.form.kinds.push({
                id: this.form.kinds.length + 1,
                value: ''
            })
        },
        remkind(){
            this.form.kinds.pop()
        },
        successUpload(response, file, fileList) {
            // console.log(response, file, fileList);
            this.form.imgpath = response.data.filepath
            // console.log(this.form.imgpath);

        },

        // 发请求 修改
        async dishedit(){
            let specifications = this.form.spec.map(item => item.value).join('=====')
            let kind = this.form.kinds.map(item => item.value).join('=====')
            this.form.specifications=specifications
            this.form.kind=kind
            // this.form.id=
            // console.log(this.form);
            // return
            console.log(111, this.form);
            let data = await dishEdit(this.form)
            // console.log(data);
            // return
            let { error_code,msg } = data
            if(error_code === 200 ){
                this.$message({
                    type: 'success',
                    duration: 1500,
                    message: msg,
                    onClose: () => {
                        this.dialogVisible=false
                        this.GetDishList()
                    }
                })
            } else {
                this.$message({
                    type: 'error',
                    duration: 1500,
                    message: msg,
                })
            }   
            this.form.spec=[]
            this.form.kinds=[]   
        }
    },
    created() {
        this.GetDishList()
        this.GetCatList()
    }
}
</script>

<style lang="scss" scope>
    .el-dialog{
        width: 70% !important;
    }
    .ql-snow{
        height: 150px;
    }
    .el-dialog__headerbtn{
        display: none;
    }
</style>